<template>
    <fieldset>
        <legend>{{!visible?'登录页面':'查询页面'}}</legend>

        <div v-if="visible">
            <fieldset>
            
            <h1>列表展示</h1>
            <button @click="visible=false">退出登录</button>
            <button @click="lists">点击展示信息列表</button>
            <ul>
                <li v-for="item in arr" :key="item.id">
                    {{item.name}}
                    <button v-has:delete="permission">删除</button>
                    <button v-has:add="permission">增加</button>
                    <button v-has:edit="permission">修改</button>
                    <button v-has:read="permission">查看</button>
                </li>
            </ul>
        </fieldset>
        </div>

    <div v-else>
        <h1>请登录</h1>
        <label>账号:</label>
        <input type="text" v-model="username">
        <br>
        <label for="">密码:</label>
        <input type="text" v-model="password">
        <button @click="login">登录</button>
    </div>


    </fieldset>

</template>
<script>
const getid =((params={})=>{
    return fetch('http://chst.vip/users/login',{
        method:'post',
        headers:{
            'content-type':'application/json'
        },
        body:JSON.stringify(params)
    })
    .then(body=>body.json())
    .catch(err=>err.toString())
})
const getmsg =()=>{
    return fetch('http://chst.vip/students/getstulist?count=5',{
        headers:{
                'authorization':sessionStorage.getItem('usermsg')
            }
    })
    .then(body=>body.json())
    .catch(err=>err.toString())
}
    export default{
        data () {
            return {
                username:'',
                password:'',
                visible:false,
                arr:[],
                permission:[]
            }
        },
        methods:{
            async login(){
                let res = await getid({username:this.username,password:this.password})
                if(res.state){
                    console.log(res);
                    this.visible=true
                    sessionStorage.setItem('usermsg',res.token)
                    this.permission=res.permission.buttons
                    console.log(this.permission);
                }
            },
            async lists(){
                let res = await getmsg()
                console.log(res);
                if(res.state){
                    this.arr=res.data
                }
            }
        },
        directives: {
            "has":{
                inserted(el,binding){
                    let aaa = binding.arg
                    let bbb = binding.value
                    let ccc = bbb.includes(aaa)
                    if(!ccc){
                        // el.disabled=true
                        el.parentNode.removeChild(el)

                    }
                }
            }
        }
    }

</script>